<template>
  <div class="users">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      <el-card class="box-card">
        <!-- 个人信息表单 -->
        <div class="card-title">完善信息</div>
        <el-form
          ref="editForm"
          :model="editForm"
          label-width="100px"
          :rules="editFormRules"
          class="userForm"
        >
          <!-- 员工姓名 -->
          <el-form-item label="员工姓名" prop="userName">
            <el-input v-model="editForm.userName"></el-input>
          </el-form-item>
           <!-- 联系方式 -->
          <el-form-item label="联系方式" prop="tell">
            <el-input v-model="editForm.tell"></el-input>
          </el-form-item>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-select style="width:100%;" v-model="editForm.sex">
                  <el-option label="男" value="1">男</el-option>
                  <el-option label="女" value="0">女</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 出生年月日 -->
              <el-form-item label="出生年月日" prop="birthday">
                <el-date-picker style="width:100%;"  v-model="editForm.birthday" type="date" placeholder="选择日期"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 原始密码 -->
          <el-form-item label="原始密码" prop="oldPwd" >
            <el-input v-model="editForm.oldPwd" placeholder="请输入原始密码"></el-input>
          </el-form-item>
          <!-- 新密码 -->
          <el-form-item label="新密码" prop="password" placeholder="请输入新密码">
            <el-input v-model="editForm.password"></el-input>
          </el-form-item>
           <!-- 邮箱 -->
          <el-form-item label="企业邮箱" prop="email">
            <el-input v-model="editForm.email"></el-input>
          </el-form-item>
          <el-form-item label="企业微信" prop="wechat">
            <el-input v-model="editForm.wechat" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <!-- 立即修改 -->
            <el-button type="primary" size="medium" @click="onSubmit">立即修改</el-button>
            <!-- 重置 初始化表单数据 -->
            <!-- <el-button size="medium" @click="reset">重置</el-button> -->
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { _debounce } from '@/public/debounce.js';
export default {
  name: 'userinfo',
  data () {
    return {
      // 员工个人数据
      user: {},

      // 编辑界面输入框校验规则
      editFormRules: {
        oldPwd: [{ required: true, message: '请输入原始密码', trigger: 'blur' }],
        userName: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }]
        // email: [{
        //   required: true,
        //   message: '请输入邮箱地址',
        //   trigger: 'blur'
        // }, {
        //   type: 'email',
        //   message: '请输入正确的邮箱地址',
        //   trigger: ['blur', 'change']
        // }],
        // wechat: [{ required: true, message: '请输入企业微信', trigger: 'blur' }]
      },

      // 界面默认数据
      editForm: {
        id: '',
        userName: '',
        userId: '',
        oldPwd: '',
        password: '',
        sex: '',
        status: '',
        birthday: '',
        email: '',
        wechat: '',
        tell: '',
        joinTime: '',
        quitTime: '',
        mark: '',
        createUserId: '',
        createTime: '',
        updateUserId: '',
        updateTime: '',
        note: '',
        location: '',
        position: '',
        duId: '',
        deptId: '',
        deptName: '',
        compId: '',
        compName: ''
      }
    };
  },
  // 实例创建后执行
  created () {
    // 获取当前登录用户信息
    this.getInfo();
  },
  methods: {
    // 提交修改
    onSubmit: _debounce(function () {
      let _this = this;
      _this.$nextTick(() => {
        // 判断是否通过验证规则验证
        _this.$refs['editForm'].validate(valid => {
          if (valid) {
            // 收集请求参数
            let params = {
              id: _this.editForm.id,
              userName: _this.editForm.userName === null ? '' : _this.editForm.userName,
              userId: _this.editForm.userId,
              // 密码Md5转换
              oldPwd: _this.editForm.oldPwd === null ? '' : _this.$md5(_this.editForm.oldPwd),
              password: _this.editForm.password ? _this.$md5(_this.editForm.password) : _this.$md5(_this.editForm.oldPwd),
              sex: _this.editForm.sex === null ? '' : _this.editForm.sex,
              status: _this.editForm.status,
              birthday: _this.editForm.birthday === null ? '' : _this.editForm.birthday,
              email: _this.editForm.email === null ? '' : _this.editForm.email,
              wechat: _this.editForm.wechat,
              tell: _this.editForm.tell === null ? '' : _this.editForm.tell,
              location: _this.editForm.location,
              position: _this.editForm.position,
              joinTime: _this.editForm.joinTime,
              quitTime: _this.editForm.quitTime,
              mark: 1,
              createUserId: _this.$store.state.userinfo.userId,
              createTime: new Date(),
              updateUserId: _this.$store.state.userinfo.userId,
              updateTime: new Date(),
              duId: _this.editForm.duId,
              compId: _this.editForm.compId,
              compName: _this.editForm.compName,
              deptId: _this.editForm.deptId,
              deptName: _this.editForm.deptName,
              note: _this.editForm.note
            };
            // 修改用户信息
            _this.$http.raw('api/updateUserInfo', params).then(res => {
              let { code, datas } = res;
              // 判断Code状态
              if (code === 0) {
                if (datas.indexOf('不正确') > -1) {
                  _this.$message({
                    message: datas,
                    type: 'error'
                  });
                } else {
                  _this.$message({
                    message: '修改成功，稍后将退出重新登录！',
                    type: 'success'
                  });
                  // 清除vuex
                  // _this.$store.commit('setToken', '');
                  // _this.$store.commit('setInfo', {});
                  // _this.$store.commit('setMenus', []);
                  // _this.$store.commit('setBtns', {});
                  localStorage.clear();
                  sessionStorage.clear();
                  setTimeout(() => {
                    // 路由跳转
                    _this.$router.push('/login');
                  }, 5000);
                }
              }
            }).catch(err => {
              if (err === undefined) {
                _this.$message({
                  message: '服务器响应异常！',
                  type: 'error'
                });
                return false;
              }
            });
          }
        });
      });
    }, 200),

    // 获取员工信息
    getInfo () {
      let _this = this;
      // 获取当前登录用户ID
      let params = {
        userId: _this.$store.state.userinfo.userId
      };
      // 通过ID获取个人信息
      _this.$http.post('api/findUserByUserId', params).then(res => {
        let { code, datas } = res;
        // 判断Code状态
        if (code === 0) {
          _this.user = datas[0];
          _this.editForm = _this.user;
          _this.editForm.password = '';
          _this.editForm.sex = _this.user.sex.toString();
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 重置 重新初始化表单数据
    reset: _debounce(function () {
      let _this = this;
      // 获取当前用户ID
      let params = {
        userId: _this.$store.state.userinfo.userId
      };
      _this.$http.post('api/findUserByUserId', params).then(res => {
        let { code, datas } = res;
        // 判断Code状态
        if (code === 0) {
          _this.$message({
            message: '重置成功！',
            type: 'success'
          });
          _this.user = datas[0];
          _this.editForm = _this.user;
          _this.editForm.password = '';
          _this.editForm.sex = _this.user.sex.toString();
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    }, 200)
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
